<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .yiji{
            width: 1022px;
            height: 366px;
            border-style: solid;
            border-color: beige
        }
        .yiji1 {
            width: 1020px;
            height: 365px;
            border-style: solid;
            border-color: beige;
            float: right;
            overflow:scroll;
        }     
        .erji1{
            width: 290px;
            height: 293px;
            border-left: 365px;
            border-right: 365px;
            border-color:blueviolet;
            border-style: solid
        } 
        .erji2{
            width: 939px;
            height: 265px;
            border-style: solid;
            border-color: beige;
            border-width: 40px
         
        }
        .erji_1{
            width: 937px;
            height:165px;
            border-color: beige;
            border-style: solid;  
        }
        .erji_2{
            width: 937px;
            height: 60px;
            border-color: beige;
            border-style: solid;  
        }
        .erji_3{
            width: 937px;
            height: 22px;
            border-color: beige;
            border-style: solid; 
            text-align:center 
        }
        .swiper-wrapper{
            width: 290px;
            height: 293px;
            border-color:blueviolet;
            border-style: solid
        }
     
    </style>
      <link rel="stylesheet" href="css/idangerous.swiper.css">
      <script src="js/idangerous.swiper-2.x.min.js"></script>
</head>
<body>
    <div class="yiji">
        <div class="yiji1">
            <div class="erji1">
                
            </div>
            <div class="erji2">
                <div class="erji_1"></div>
                <div class="erji_2" >
                    <button class="erji_2">点击选择图片</button>
                </div>
                <div class="erji_3"><span>或将图片拖到此处，单次最多可选300张</span></div>
            </div>
            <script src="path/to/swiper.min.js"></script>

            

        </div>

    </div>
    <div class="qq">
        <button>保存</button>

    </div>
    
</body>
</html>